<template>
 <div class="box">
  <van-nav-bar
  title="首页"
  left-text="返回"
  left-arrow
/>
<van-button plain type="primary" @click="$router.push('/about')">新增任务</van-button>
<div class="dao">
<van-button color="blue">全部任务（{{ store.list.length }}）</van-button>
<van-button color="blue">已完成（{{ store.list.length-store.weiwancheng}}）</van-button>
<van-button color="red">未完成（{{ store.weiwancheng }}）</van-button>
</div>
<div class="libiao">
  <div class="zi">任务列表</div>
  <div :class="{hang:true, unfinished: !item.status }" v-for="(item,index) in list" :key="index">
    <input :checked="item.status" type="checkbox" @click="change(item.id)">
    <span>{{item.name}}</span>
    <span @click="del(item.id)">删除</span>
  </div>
</div>
 </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import {useCounterStore} from '../stores/counter'
import { storeToRefs } from 'pinia'
var $router = useRouter()
var store=useCounterStore()
var {list} = storeToRefs(store);
var change = (id)=>{
  store.zhuangtai(id);
}
var del  = (id)=>{
  store.delrenwu(id)
}
</script>
<style  scoped>
.box{
  padding:  10px;
}
.dao{
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
.zi{
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0;
}
.hang{
  margin: 10px 0;
  padding: 0 10px;
  background-color: blue;
  height: 60px;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  color: white;
}
.unfinished{
  background-color: red;
}
</style>